今天是比較輕鬆的單元，介紹 icon

首先當然是翻翻作者寫的文件:
https://pure-admin-doc.vercel.app/pages/497c2e/#iconify-icons-ep

看起來很強大!但很多沒聽過的，一個一個去查

• element-plus 的 icons
• fontawesome4、5+
• remix icon
• iconfont
• ant design icon

值得注意的是針對精簡版的 pure-admnin-thin 作者說只有使用 @iconify-icons/ep 和 @iconify-icons/ri ， 因此若要用其他的就要自行安裝

小簡介

element-plus

element-ui在使用的
http://icon-sets.iconify.design/ep/

fontawesome

蠻常聽見的其他人在使用的，目前最新的是 v5
https://fontawesome.com/v4/icons/

remix icon

第一次聽到，網站很美，下載量也很高!
https://remixicon.com/

iconfont

中國阿里巴巴團隊
https://www.iconfont.cn/

ant design

中國螞蟻金融團隊
https://icon-sets.iconify.design/ant-design/

實際使用 Go Go

目標是把 icon 加入首頁，關注2個檔案即可

\src\components\ReIcon\src\iconifyIconOffline.ts

1.引入
2.addIcon("定義使用icon的字串",引入的變數)
3.在view裡面使用

範例步驟:
先到這邊找到icon
https://icon-sets.iconify.design/ep/hide/
知道 import 文字是甚麼

到iconifyIconOffline.ts

//\src\components\ReIcon\src\iconifyIconOffline.ts
//...略

//找喜歡的icon，取一個變數這邊取'HidePassword'
import HidePassword from "@iconify-icons/ep/hide";
//"定義使用icon的字串",引入的變數
addIcon("hide-password", HidePassword);

export default defineComponent({
//...略

\src\views\welcome\index.vue

到首頁

<script setup lang="ts">
//\src\views\welcome\index.vue
//引用作者的hook，在button塞入icon
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div>
    <!-- element 原本就有的 -->
    <IconifyIconOffline icon="user" />
    <!-- element 新增引用 -->
    <IconifyIconOffline icon="hide-password" />
    <br />
    <!-- 使用作者封裝的 hook : useRenderIcon-->
    <el-button
      type="primary"
      :icon="useRenderIcon('user', { color: '#fff' })"
    />
    <el-button
      type="primary"
      :icon="useRenderIcon('hide-password', { color: '#fff' })"
    />
  </div>
</template>